body,div,ul,li{
    margin:0;
    padding:0;
}
li{
    
    list-style:none;
}
body{
    min-width:1000px;
}
header{
    height:48px;
    background:-webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#d7d7d7));
    padding:0 5px;
}

.clearfix:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#category,#category li,#logo{float:left;}
#category{
    height:100%;
    margin-left:40px;
}
#category li{
    margin-left:4px;
    margin-top:10px;
    cursor:pointer;
    width:71px;
    height:37px;
    background:-webkit-gradient(linear,left top, left bottom, from(#fefefe), to(#ebebeb));
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    border:1px solid #d0d0d0;
    border-width: 1px 1px 0 1px;
    text-align:center;
    line-height:37px;
    color:#333;
    text-shadow:#fff 1px 1px 1px;
}
#category li:hover{
    background:-webkit-gradient(linear,left top, left bottom, from(#fefefe), to(#f7f7f7))
}
#category li.active{
    height:39px;
    line-height:39px;
    margin-top:8px;
    color:#fff;
    text-shadow: #638610 1px 1px 1px;
    border-color:#7ba32c;
    font-size:20px;
    font-weight:bold;
    background:-webkit-gradient(linear, left top, left bottom, from(#cbeb05), to(#7c9800));
}

#op{
    float:right;
    margin-top:10px;
}
#op li{
    float:left;
    height:26px;
    line-height:26px;
    font-size:12px;
}
#op li.btn{
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f7f7f7));
    border: 1px solid #e3e3e3;
    color:#333;
    text-align:center;
    font-size:14px;
    text-shadow:#fff 1px 1px 1px;
    cursor:pointer;
}

#op li.btn:hover{
    background:-webkit-gradient(linear, left top, left bottom, 
        from(#fff),
        color-stop(0.7,#efefef),
        to(#fafafa));
}

#op li.local{
    position:relative;
    overflow:hidden;
}

#op li.local input[type="file"]{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    width:58px;
    height:28px;
}

#op li:nth-of-type(1){color:#949494;}
#op li:nth-of-type(2){
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    width:58px;
    border-right:1px solid #d7d7d7;
}
#op li:nth-of-type(3){
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    width:58px;
    border-left:none;
}
#op li:nth-of-type(4){
    -webkit-border-radius: 5px;
    width:84px;
    margin-left:9px;
}

.split-bar{
    height:5px;
    background:-webkit-gradient(linear, left top, left bottom, 
        color-stop(0.2,#7d9900),
        color-stop(0.6,#bed730),
        color-stop(0.8,#adc724),
        color-stop(1.0,#becc80));
}
footer{
    height:39px;
    border-top:1px solid #ebebeb;
    background:-webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e4e4e4));
}

#doc{
    margin:10px auto;
    width:1050px;
}

#canvasBox{
    float:left;
    border:5px solid #787878;
    width:800px;
    background:url(../img/bg.png);
    height:500px;
    position:relative;
}

#toolBox{
    width:235px;
    height:500px;
    float:right;
    position:relative;
    overflow:hidden;
}

#toolBox>div{
    position:absolute;
    width:1410px;
    -webkit-transition-duration: 1s;
}

#toolBox>div>div{
    width:235px;
    float:left;
}
#toolBox>div>div>div, #toolBox>div>div>div.active{
    color:#000;
    height:23px;
    width:231px;
    -webkit-border-radius:5px;
    margin: 0 auto;
    line-height:23px;
    font-size:14px;
    text-align:center;
    text-shadow:#fff 1px 1px 1px;
}
#toolBox>div>div>div{
    background:-webkit-gradient(linear, left top, left bottom,
        from(#f5fde2),
        color-stop(0.7,#d7e996),
        to(#d7e999));
    border:1px solid #9fc120;
}
#toolBox>div>div>div:hover{
    background:-webkit-gradient(linear, left top, left bottom,
        from(#f5fde2),
        to(#e0f1a7));
}

#toolBox>div>div>div.active{
    background:-webkit-gradient(linear, left top, left bottom,
        from(#fff),
        color-stop(0.5,#fff),
        to(#a6a6a6));
    border:1px solid #949494;
}

#toolBox>div>div>div.active:hover{
    background:-webkit-gradient(linear, left top, left bottom,
        color-stop(0.5,#fff),
        to(#dadada));
    border-color:#d9d9d9;
}
#toolBox>div>div ul{
    height:475px;
    overflow:auto;
}
#toolBox>div>div li{
    float:left;
    width:100px;
    text-align:center;
    margin:3px;
    
    font-size:14px;
}

#toolBox>div>div li span{
    display:block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#toolBox>div>div li img{
    width:90px;
    height:90px;
    border:#ebebeb 3px solid;
    background:-webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fefefe),
        color-stop(0.7,#f6f6f6),
        to(#f8f8f8)
    );
    cursor:pointer;
}

#toolBox>div>div li img:hover{
    border-color:#9fdd1b;
    -webkit-border-radius:3px;
}

#logo{
    font-size:24px;
    font-weight:bold;
    color:#626262;
    text-shadow:#FFF 1px 1px 1px;
    font-style:italic;
}

#logo span{
    color:#9b0400;
    font-size:32px;
}
#dialog_album ul li{
    float: left;
    width: 100px;
    height: 100px;
    line-height:100px;
    border: 2px solid gray;
    margin: 3px;
    text-align: center;
}
#dialog_album ul li::after{
    content: ".";
    visibility: hidden;
}
#dialog_album ul li:hover{
    border-color: #9fdd1b;
}
#dialog_album ul li img{
    max-height: 100px;
    max-width: 100px;
    border: none;
    vertical-align: middle;
    margin-top:-4px;
    cursor: pointer;
}

#glassBoxImage{
    display: none;
}

.adj-pop{
    width:734px;
    height:48px;
    position:absolute;
    -webkit-border-radius:3px;
    background-color:rgba(0,0,0,0.6);
    -webkit-background-clip:content;
    border:3px solid rgba(0,0,0,0.1);
    left:20px;
    bottom:10px;

    color:#949494; 
}

#adjSlider>div{
    float:left;
    line-height:40px;
}
#adjSlider>div:nth-of-type(3n+2){
    height:3px;
    width:115px;
    left:10px;
    top:20px;
}

#adjSlider>div a{
    width:11px;
    height:11px;
}

#adjSlider .slider-split-bar{
    border-right:1px solid #424242;
    padding-right:10px;
    height:48px;
}
#adjSlider>div:nth-of-type(3n){
    margin-left:20px;
    width:40px;
}

#adjSlider>div:nth-of-type(3n+1){
    margin-left:8px;
}
.adj-pop span.x-cross{
    position:absolute;
    width:15px;
    height:15px;
    -webkit-border-radius:3px;
    line-height:15px;
    text-align:center;
    top:5px;
    right:5px;
    background:-webkit-gradient(linear,left top, left bottom, from(#fefefe), to(#ebebeb));
    cursor:pointer;
    color:#333;
}
.adj-pop span.x-cross:hover{
    background:-webkit-gradient(linear,left top, left bottom, from(#fefefe), to(#f7f7f7));
    color:#555;
}

.resizer{
    width:460px;
    left: 150px;
}
.resizer button{
    width: 54px;
    height: 24px;
}
.resizer>div{
    margin:10px 0 0 10px;
}
.resizer input{
    background-color: #949494;
    border:1px solid #040404;
}
.resizer span, .resizer input[type="checkbox"], .resizer button{
    margin-left:10px;
}
.resizer input[type="number"]{
    width:60px;
}

#cliperBox{
    position: absolute;
    left:0;
    top:0;
}

#cliperBox>div:first-of-type{
    position: absolute;
    border:1px solid #fff;
    left:350px;
    top:200px;
    width:100px;
    height:100px;
    -webkit-box-shadow:0px 0px 5px #000;
}

#cliperBox>div.cliper-handler{
    position:absolute;
    width:12px;
    height:12px;
    -webkit-border-radius:6px;
    background:#FFF;
    -webkit-box-shadow:0px 0px 5px #000;
}

#cliperBox>div:nth-of-type(2){
    left:344px;
    top:195px;
    cursor: nw-resize;
}
#cliperBox>div:nth-of-type(3){
    left:445px;
    top:195px;
    cursor: ne-resize;
}
#cliperBox>div:nth-of-type(4){
    left:445px;
    top:296px;
    cursor: se-resize;
}
#cliperBox>div:nth-of-type(5){
    left:344px;
    top:296px;
    cursor: sw-resize;
}

#selectPicDialog{
    background:#707070;
    color:#fff;
    text-align:left;
}
#selectPicDialog span{
    font-size:12px;
}